<template>
<view class="top-window-header">
  <view>
    <custom-tab-bar class="tab-bar-flex" direction="horizontal" :show-icon="false" :selected="current" @onTabItemTap="toSecondMenu" />
  </view>
</view>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  data(){
    return {
      current: 1,
      indexPage: [{
        tabBar: '/pages/tab-bar/vuex',
        index: '/pages/vuex/vuex01',
        name: 'vuex'
      }, {
        tabBar: '/pages/tab-bar/uni-plugin',
        index: '/pages/uni-plugin/uni-table',
        name: 'uniPlugin'
      }, {
        tabBar: '/pages/tab-bar/nvue',
        index: '/pages/nvue/nvue01',
        name: 'nvue'
      }, {
        tabBar: '/pages/tab-bar/uni-component',
        index: '/pages/uni-component/01view/uc01-view',
        name: 'uniComponent'
      }, {
        tabBar: '/pages/tab-bar/uni-api',
        index: '/pages/uni-api/uni-api',
        name: 'uniComponent'
      }]
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newRoute) {
        const width = uni.getSystemInfoSync().screenWidth
        if ( width >= 768 ) {
          console.log('newRoute：',newRoute);
          for(let i=0;i<this.indexPage.length;i++){
            let item = this.indexPage[i];
            if(item.index === newRoute.path){
              this.current=i;
              this.setLeftActiveComponent(item.name);
            }
          }
        }
      }
    }
  },
  methods:{
    ...mapMutations(['setLeftActiveComponent']),
    toSecondMenu(e){
      const activeTabBar = '/' + e.pagePath
      for(const item of this.indexPage) {
        if (activeTabBar === item.tabBar) {
          uni.redirectTo({
            url: item.index
          })
        }
      }
    }
  }
}
</script>

<style scoped>
.top-window-header {
  height: 60px;
  padding: 0 15px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #e1e1e1;
  background-color: #FFFFFF;
  color: #333;
}
.tab-bar-flex {
  width: 360px;
  background: #fff;
}
</style>
